<template>
  <div class="link flex">
    <table border="1" class="tabledata">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px; font-weight: bold">精苯生产情况</td>
      </tr>
      <tr>
        <td colspan="2" rowspan="2">粗苯进车数</td>
        <td colspan="4">粗苯进厂量(t)</td>
        <td colspan="4">粗苯加工量(t)</td>
        <td colspan="4">纯苯产生量(t)</td>
        <td colspan="2" rowspan="2">三苯收率(%)</td>
        <td colspan="2" rowspan="2">纯苯收率(%)</td>
        <td colspan="4" rowspan="7">
          <textarea cols="40" rows="8" v-model="inputs.content" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;">{{inputs.content}}</div>
        </td>
      </tr>
      <tr>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>
        <td colspan="2">
          <input class="dinput" v-model="inputs.cbjcs" v-if="!date.isup"/>
          <span v-else>{{inputs.cbjcs}}&nbsp;</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbjclr" v-if="!date.isup"/>
          <span v-else>{{inputs.cbjclr}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbjcly" v-if="!date.isup"/>
          <span v-else>{{inputs.cbjcly}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbjglr" v-if="!date.isup"/>
          <span v-else>{{inputs.cbjglr}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbjgly" v-if="!date.isup"/>
          <span v-else>{{inputs.cbjgly}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbsclr" v-if="!date.isup"/>
          <span v-else>{{inputs.cbsclr}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbscly" v-if="!date.isup"/>
          <span v-else>{{inputs.cbscly}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.sbsl" v-if="!date.isup"/>
          <span v-else>{{inputs.sbsl}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbsl" v-if="!date.isup"/>
          <span v-else>{{inputs.cbsl}}</span>
        </td>
      </tr>
      <tr>
        <td rowspan="3" colspan="2">粗苯储量(t)</td>
        <td colspan="2">1#罐</td>
        <td colspan="2">2#罐</td>
        <td colspan="2">3#罐</td>
        <td colspan="2" rowspan="3">纯苯储量(t)</td>
        <td colspan="2">5#罐</td>
        <td colspan="2">6#罐</td>
        <td colspan="4">耗驰放气量(万m³)</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" style="height: 60px">
          <input type="number" class="dinput" v-model="inputs.cbcl1" v-if="!date.isup"/>
          <span v-else>{{inputs.cbcl1}}</span>
        </td>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbcl2" v-if="!date.isup"/>
          <span v-else>{{inputs.cbcl2}}</span>
        </td>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbcl3" v-if="!date.isup"/>
          <span v-else>{{inputs.cbcl3}}</span>
        </td>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbcl5" v-if="!date.isup"/>
          <span v-else>{{inputs.cbcl5}}</span>
        </td>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.cbcl6" v-if="!date.isup"/>
          <span v-else>{{inputs.cbcl6}}</span>
        </td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.hcfqlr" v-if="!date.isup"/>
          <span v-else>{{inputs.hcfqlr}}</span>
        </td>
        <td rowspan="2" colspan="2">
          <input type="number" class="dinput" v-model="inputs.hcfqly" v-if="!date.isup"/>
          <span v-else>{{inputs.hcfqly}}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">粗苯合计储量(t)</td>
        <td colspan="6">{{ Number(inputs.cbcl1)+Number(inputs.cbcl2)+Number(inputs.cbcl3) }}</td>
        <td colspan="2">纯苯合计储量(t)</td>
        <td colspan="4">{{ Number(inputs.cbcl5)+Number(inputs.cbcl6) }}</td>
      </tr>
      <tr>
        <td rowspan="4">纯度分析(%)</td>
        <td colspan="2">分析</td>
        <td colspan="2">纯苯</td>
        <td colspan="2">甲苯</td>
        <td colspan="2">甲基环己烷</td>
        <td colspan="2">总环戊烷</td>
        <td colspan="2">总硫</td>
        <td colspan="2">噻吩</td>
        <td colspan="2">含水</td>
        <td colspan="2">环戊烷含苯</td>
        <td colspan="3">重苯含二甲</td>
      </tr>
      <tr v-for="item in 3">
        <td colspan="2" v-if="item == 1">装置区一期</td>
        <td colspan="2" v-if="item == 2">装置区二期</td>
        <td colspan="2" v-if="item == 3">装置区三期</td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['cb' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['cb' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['jb' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['jb' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['jjhyw' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['jjhyw' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['zff' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['zff' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['zl' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['zl' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['sf' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['sf' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['hs' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['hs' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['ffhb' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['ffhb' + item]}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs['zbhej' + item]" v-if="!date.isup"/>
          <span v-else>{{inputs['zbhej' + item]}}</span>
        </td>
      </tr>
      <tr>
        <td colspan="3" rowspan="2">其它产品液位(m)</td>
        <td colspan="2">甲苯(7# 8#)</td>
        <td colspan="2">二甲苯(9#)</td>
        <td colspan="2">重苯(13#)</td>
        <td colspan="2">环戊烷(12#)</td>
        <td colspan="2">C8+(10#)</td>
        <td colspan="9" rowspan="3">
          <textarea cols="70" rows="3" v-model="inputs.hzq" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;">{{inputs.hzq}}</div>
        </td>
      </tr>
      <tr>
        <td>
          <input type="number" class="dinput" v-model="inputs.jb7" v-if="!date.isup"/>
          <span v-else>{{inputs.jb7}}&nbsp;</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="inputs.jb8" v-if="!date.isup"/>
          <span v-else>{{inputs.jb8}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.ejb9" v-if="!date.isup"/>
          <span v-else>{{inputs.ejb9}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.zb13" v-if="!date.isup"/>
          <span v-else>{{inputs.zb13}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.ffj12" v-if="!date.isup"/>
          <span v-else>{{inputs.ffj12}}</span>
        </td>
        <td colspan="2">
          <input type="number" class="dinput" v-model="inputs.c8" v-if="!date.isup"/>
          <span v-else>{{inputs.c8}}</span>
        </td>
      </tr>
      <tr>
        <td colspan="3">其它产品产量(t)</td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.qita78" v-if="!date.isup"/>
          <span v-else>{{inputs.qita78}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.qita9" v-if="!date.isup"/>
          <span v-else>{{inputs.qita9}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.qita13" v-if="!date.isup"/>
          <span v-else>{{inputs.qita13}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.qita12" v-if="!date.isup"/>
          <span v-else>{{inputs.qita12}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.qita10" v-if="!date.isup"/>
          <span v-else>{{inputs.qita10}}</span></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name="jbscqk">
import cache from "@/utils/cache";
import { getJbscqk, jbscqkSave, jbscqkSubmit } from "@/api/report";
let arr = []
for(let i=1;i<=3;i++){
  arr.push({
    ['cb'+i]:'',
    ['jb'+i]:'',
    ['jjhyw'+i]:'',
    ['zff'+i]:'',
    ['zl'+i]:'',
    ['sf'+i]:'',
    ['hs'+i]:'',
    ['ffhb'+i]:'',
    ['zbhej'+i]:'',
  })
}
let obj = {
  cbjcs:'',
  cbjclr:0,
  cbjcly:0,
  cbjglr:0,
  cbjgly:0,
  cbsclr:0,
  cbscly:0,
  sbsl:0,
  cbsl:0,
  cbcl1:0,
  cbcl2:0,
  cbcl3:0,
  cbcl5:0,
  cbcl6:0,
  hcfqlr:0,
  hcfqly:0,
  jb7:0,
  jb8:0,
  ejb9:0,
  zb13:0,
  ffj12:0,
  c8:0,
  qita78:0,
  qita9:0,
  qita13:0,
  qita12:0,
  qita10:0,
  hzq:'',
  content:'记事：',
  ...arr[0],
  ...arr[1],
  ...arr[2],
}
// 整表 数据绑定
const inputs = ref(obj);

const save = async () => {
  let userInfo = cache.get('userInfo')
  await jbscqkSave({
    inputs:inputs.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
const uuuu = ref(cache.get('role_name'))
// 提交方法，调用接口
const submit = async () => {
  await jbscqkSubmit({
    label:uuuu.value,
    date:date.date,
  })
}

onMounted(() => {
  getData()
})

const getData = async () => {
  getJbscqk(date).then((res)=>{
    if(res.length==0){
      inputs.value = obj
    }else{
      inputs.value = res
    }
  })
}
const date = defineProps(['date','isup'])
watch(date, async (n) => {
  getData()
})

defineExpose({
  save,
  submit
})
</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
